<script setup lang="ts">
import { reactive, provide } from 'vue';
import { myStore } from '@/store/my';
import ExcellentSkillPopup from '../ExcellentSkillPopup/index.vue';
const store: any = myStore();
const state = reactive({
  show: false,
});
const props = defineProps({
  page: {
    type: String,
  },
});
const closeChange = () => {
  state.show = false;
  store.getResumeDetail();
};
provide('popup', {
  closeChange,
});
</script>
<template>
  <div class="resume-label">
    <h3>
      擅长技能<van-icon name="add-o" v-if="props.page !== 'preview'" @click="state.show = true" />
    </h3>
    <dl v-if="store.resumeInfo.sys_skill_ids || store.resumeInfo.skill_ids" class="text-list">
      <dt
        v-if="store.resumeInfo.sys_skill_ids"
        v-for="(item, index) in store.resumeInfo.sys_skill_ids.split(',')"
        :key="index"
      >
        {{ item }}
      </dt>
      <dt
        v-if="store.resumeInfo.skill_ids"
        v-for="(item, index) in store.resumeInfo.skill_ids.split(',')"
        :key="index"
      >
        {{ item }}
      </dt>
    </dl>
    <label v-else>请您选择擅长技能</label>
  </div>

  <!--弹窗-->
  <van-popup
    v-model:show="state.show"
    position="top"
    duration="0"
    :style="{ width: '100%', height: '100%' }"
  >
    <ExcellentSkillPopup :show="state.show"></ExcellentSkillPopup>
  </van-popup>
</template>
<style scoped>
.text-list dt {
  font-size: 0.59rem;
  line-height: 0.59rem;
  font-weight: 300;
  color: #666666;
  padding: 0.4rem 0.5rem;
  margin-right: 0.27rem;
  margin-bottom: 0.3rem;
  background: #f6f7f8;
  border-radius: 0.16rem;
  display: inline-block;
}
</style>
